<template>
  <div class="home">
    <nav-bar title="书架"></nav-bar>
    <button class="add">添加小说</button>
    <tab-bar></tab-bar>
  </div>
</template>
<script>
import NavBar from '@/components/NavBar';
import TabBar from '@/components/TabBar';

export default {
  components: {
    NavBar,
    TabBar
  },
};
</script>
<style lang="scss">
  @function r($px) {
    @return ($px / 14 ) + rem;
  }
  .home {
    width: 100%;
    min-height: 100vh;
    background: white;
    position: relative;
    .add {
      padding: r(10);
      background: #26a2ff;
      color: white;
      font-size: r(14);
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      border: none;
      border-radius: r(8);
      transform: translate(-50%, -50%);
    }
  }
</style>
